<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header/>
        <div class="content Gwidth">
            <Breadcrumb separator=">">
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem to="/news">一起头条</BreadcrumbItem>
                <BreadcrumbItem>头条详情</BreadcrumbItem>
            </Breadcrumb>
            <div class="main">
                <div class="left">
                    <h1>{{info.title}}</h1>
                    <div class="author">
                        <div class="logo">
                            <img :src="info.img" :alt="info.custer" :title="info.custer">
                        </div>
                        <div class="author_cont">
                            <div class="name">
                                <span>{{info.custer}}</span>
                                <span class="v"></span>
                            </div>
                            <div class="time">发布时间：{{info.create_time}}</div>
                        </div>
                    </div>
                    <div class="main_content" v-html="info.content"></div>
                </div>
                <div class="right">
                    <div class="title">相关文章推荐</div>
                    <div class="right_cont">
                        <div class="item" v-for="item in recommend" :key="item.article_id">
                            <div class="img">
                                <nuxt-link :to="'/news/detail/'+item.article_id">
                                    <img :src="item.article_img" :alt="item.title" :title="item.title">
                                </nuxt-link>
                            </div>
                            <h1>
                                <nuxt-link :to="'/news/detail/'+item.article_id">
                                    {{item.title}}
                                </nuxt-link>
                            </h1>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
import API from '@/http/api'
import http from '@/http/http.js'
export default {
    components: {
		Header,
		Sidebar
	},
    data(){
        return{
            id:'',
            recommend:[],
            info:{}
        }
    },
    async asyncData ({ store, params,route }) {
        let{data:{code,data}} = await http.post(API.news.getArticleDetails,{
            article_id:route.params.id
        })
        return{
			info : data.data.info,
            recommend : data.data.data
        }
    },
    created(){
        console.log('this.$router-------------------------',this.$route)
        if(this.$route.params.id){
            this.id = this.$route.params.id
        }
        // this.getArticleDetails()
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        
    },
    methods:{
        async getArticleDetails(){
            let{data:{code,data}} = await this.$http.post(this.$API.news.getArticleDetails,{
                article_id:this.id
            })
            if(code==200){
                this.info = data.data.info
                this.recommend = data.data.data
            }
        }
    },
}
</script>
<style scoped>
    .content .ivu-breadcrumb{
        margin: 30px auto 28px auto;
    }
    .content .main{
        display: flex;
        justify-content: space-between;
    }
    .content .main .left{
        width: 858px;
    }
    .content .main .right{
        width: 300px;
    }
    .content .main .left h1{
        font-size: 26px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 30px;
    }
    .content .main .left .author{
        display: flex;
        align-items: center;
    }
    .content .main .left .author .logo,.content .main .left .author .logo img{
        width: 40px;
        height: 40px;
    }
    .content .main .left .author .author_cont{
        margin-left: 10px;
    }
    .content .main .left .author .author_cont .name span{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
    }
    .content .main .left .author .author_cont .name .v{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url(~/static/image/ico/v.png)center center no-repeat;
    }
    .content .main .left .author .author_cont .time{
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-top: 5px;
    }
    .main_content{
        margin-top: 50px;
    }
    .content .main .right .title{
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 20px;
        border-bottom: 1px solid #EEEEEE;
    }
    .content .main .right .right_cont{
        margin-top: 30px;
    }
    .content .main .right .right_cont .item{
        margin-bottom: 30px;
    }
    .content .main .right .right_cont .item .img{
        width: 274px;
        height: 210px;
    }
    .content .main .right .right_cont .item .img img{
        width: 100%;
        height: 100%;
    }
    .content .main .right .right_cont .item h1 a{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 15px;
        display: block;
    }
</style>
